<template>
    <view class="main-content">
		<index-header :statusBarHeight="statusBarHeight"></index-header>
		<view class="content" :style="{'padding-top': statusBarHeightS +'px'}">
			<view class="search_line">
				<image  style="width: 20upx;height: 20upx;" src="../../static/img/location.png"></image>
				<span>盐城市</span>	
				<view class="aui-search" @click="jump()">
					<image style="width: 20upx;height: 20upx;margin: 20upx;" src="../../static/img/search_icon.png"></image>
					<input type="text" placeholder="搜索更多活动" />
				</view>
          
			</view>
			
			
			<!-- 顶部导航栏 -->
								<view class="horizonal-tab">
									<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
										<block v-for="(item,index) in tabBars" :key="index">
											<view class="scroll-tab-item" :class="{'active': tabIndex==index}" 
											@tap="toggleTab(index)">
												{{item.name}}
											</view>
										</block>
									</scroll-view>
								</view>
								
								<!-- 内容区 -->
								<view class="content1">
									<!-- 滑块视图 -->
								<swiper class="swiper-box"
											indicator-dots 	
											circular
											autoplay
											interval=5000
											>
												<swiper-item v-for="(item,index) in swipeList" :key="index">
													
														<navigator :url="'detail?id='+index">
													<image style="height: 260upx; border-radius: 15upx;" :src="item.imgUrl"></image>
													</navigator>
												</swiper-item>
											</swiper>
								</view>
								
								<view class="title"><text>热门活动</text></view>
								
								<view class="activity_list" style="padding-bottom: 100upx;">
									<view class=" ">
										<view class="text" style="-webkit-flex: 1;flex: 1;" @click="jumpDetail()" v-for="(item,index) in actList">
											<image style="width: 100%;height: 200upx;" :src="item.img"></image>
											<view class="box">
												<view class="act_title" >{{item.actname}}</view>
												<view>
													<text class="t1">{{item.typename}}</text>
													<text class="t2">{{item.time}} </text>
												</view>
											</view>
										</view>
										
									</view>
								</view>
								
								
				</view>
								
			
     

		 <view-tabbar :current="0"></view-tabbar>

    </view>
</template>

<script>
 
	import Tabbar from '@/components/bottomNav.vue'
    export default {

		components: {
		            'view-tabbar': Tabbar
		        }, 

       

        onLoad() {
           
        },
        onShow(e) {
            // #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE
        	   var sysinfo = uni.getSystemInfoSync();
        	   this.statusBarHeight = sysinfo.statusBarHeight + 44;
        	   this.statusBarHeightS = sysinfo.statusBarHeight + 120;
        	// #endif
        	// #ifdef H5
        	   var sysinfo = uni.getSystemInfoSync();
        	   this.statusBarHeight = '0';
        	   this.statusBarHeightS = '54';
        	// #endif
        },
        computed: {
           
        },
        data () {
             			return {
							statusBarHeight:'',
							statusBarHeightS:'',
             				tabIndex: 0, /* 选中标签栏的序列,默认显示第一个 */
             				swipeList: [
             					{imgUrl:'https://www.3sworld.com/uploads/20210223/0ac17a87cb325798738d91cf778e6714.jpg',id:1},
             					{imgUrl:'https://www.3sworld.com/uploads/20210219/df5a5cca1349dffb13ae822c78e126b8.jpg',id:1},
             					{imgUrl:'https://www.3sworld.com/uploads/20210223/0ac17a87cb325798738d91cf778e6714.jpg',id:1},
             					{imgUrl:'https://www.3sworld.com/uploads/20210219/df5a5cca1349dffb13ae822c78e126b8.jpg',id:1},
      
             				],
             				tabBars:[
             					{
             						name: '热门',
             						id: 'hot'
             					},
             					{
             						name: '线上',
             						id: 'online'
             					},
             					{
             						name: 'GIS',
             						id: 'gis'
             					},
             					{
             						name: '测绘',
             						id: 'ch'
             					},
             					{
             						name: '遥感',
             						id: 'yg'
             					},
             					{
             						name: '导航定位',
             						id: 'dhdw'
             					},
             					{
             						name: '地球科学',
             						id: 'dqkx'
             					},
             					{
             						name: '智慧城市',
             						id: 'zhcs'
             					},
             					{
             						name: '无人机',
             						id: 'yule'
             					}
             				],
							actList:[
								{actname:'测绘大讲堂第二季第四期-测绘教育和学科发展',img:'https://www.3sworld.com/uploads/20210223/a0abcc88e2a879a21d7817494e44f91e.jpg',typename:'线上活动',time:'4/15 周四'},
								{actname:'测绘大讲堂第二季第四期-测绘教育和学科发展',img:'https://www.3sworld.com/uploads/20210223/a0abcc88e2a879a21d7817494e44f91e.jpg',typename:'线上活动',time:'4/15 周四'},
								{actname:'测绘大讲堂第二季第四期-测绘教育和学科发展',img:'https://www.3sworld.com/uploads/20210223/a0abcc88e2a879a21d7817494e44f91e.jpg',typename:'线上活动',time:'4/15 周四'},
								{actname:'测绘大讲堂第二季第四期-测绘教育和学科发展',img:'https://www.3sworld.com/uploads/20210223/a0abcc88e2a879a21d7817494e44f91e.jpg',typename:'线上活动',time:'4/15 周四'},
								{actname:'测绘大讲堂第二季第四期-测绘教育和学科发展',img:'https://www.3sworld.com/uploads/20210223/a0abcc88e2a879a21d7817494e44f91e.jpg',typename:'线上活动',time:'4/15 周四'},
								
							]
             			}
             		},
             		methods:{
             			//切换选项卡
             			toggleTab (index) { 
             				this.tabIndex=index;
             			},
						jump(){
							uni.navigateTo({
							    url:"/pages/search/search"
							})
						},
						jumpDetail(){
							uni.navigateTo({
							    url:"/pages/activity/detail"
							})
						}
             		}

    }
</script>

<style>
	.t1{
		float: left;
		font-size: 18upx;
		color: #999999;
	}
	.t2{
		float: right;
		font-size: 18upx;
		color: #999999;
	}
	.act_title{
		text-align: left;
	}
	.box{
		padding: 10upx;
	}
	.title{
		text-align: center;
		margin: 10upx;
		font-size: 50upx;
		font-weight: bold;
	}
    .content {
        width: 750upx;
        height: auto;
        padding-top: 108upx;
		min-height: calc(100% - 631upx);
    }
	.swiper-box{
		text-align: center;
		margin: 30upx;
		border-radius: 5upx;
	}
	
	.search_line{
		padding: 30upx;
		position: relative;
		height: 60upx;
		line-height: 30px;
	}
	input{
		font-size: 18upx;
		color: black;
		line-height: 28upx;;
		height: 100%;
		// position: absolute;
		left: 20upx;
		font-size: 20upx;
	}
	.aui-search {
	    background-color: #F4F4F4;
	    width: 75%;
	  // padding-top: 15upx;
	  // padding-bottom: 5upx;
	  //   border-radius: 15upx;
	    height: 60upx;
		line-height: 60upx;
	    //padding-left: 10px;
		display: inline-flex;
		margin-left: 40upx;
		float: right;
		
	}
	.horizonal-tab{
				color: #999;
			}
			.horizonal-tab .active{
				font-size: 36upx;
				color: black;
				font-weight: bold;
			}
			.scroll-tab{
				white-space: nowrap; /* 必要，导航栏才能横向*/
				text-align: center;
			}
			.scroll-tab-item{
				display: inline-block; /* 必要，导航栏才能横向*/
				margin: 20rpx 10rpx 0 20rpx;
			}
			.active .scroll-tab-line{
				border-bottom: 5rpx solid red;
				border-top: 5rpx solid red;
				border-radius: 20rpx;
				width: 70rpx;
				
			}
			

			.text {
				margin: 18rpx 12rpx;
				width: 46%;
				text-align: center;
				color: #777;
				font-size: 26rpx;
				float: left;
				border: 1px solid #EEEEEE;
			}
			
			.desc {
				/* text-indent: 40rpx; */
			}
			.flex-pc {
				display: flex;
				justify-content: center;
			}
</style>
